import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno({ dark: 'class' }),
    presetIcons({
      scale: 1.2,
      warn: true,
      extraProperties: {
        'display': 'inline-block',
        'vertical-align': 'middle',
      },
    }),
    presetAttributify(),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
  shortcuts: [
    {
      'flex-center': 'flex justify-center items-center',
      'flex-x': 'flex flex-row',
      'flex-y': 'flex flex-col',
    },
    [/^flex-(row|col)-(center|start|end|between|around)-(center|start|end)$/, ([, direction, justify, items]) => {
      return `flex flex-${direction} justify-${justify} items-${items}`
    }],
  ],
  rules: [
    ['test', { border: 'solid 1px red' }],
  ],
})
